{{ $class:= .Class }}
{{ $context:= .Context }}
{{ $permalink:= $context.RelPermalink }}

{{ with site.Params.search }}
  {{ if .enable }}
    <div
      class="search-modal {{ $class }}"
      aria-hidden="true"
      style="--color-primary: {{ site.Params.search.primary_color | default `#7f0ec6` }}">
      <div data-target="close-search-modal" class="search-modal-overlay"></div>
      <div
        class="search-wrapper"
        data-image="{{ site.Params.search.show_image | default true }}"
        data-description="{{ site.Params.search.show_description | default true }}"
        data-tags="{{ site.Params.search.show_tags | default true }}"
        data-categories="{{ site.Params.search.show_categories | default true }}">
        <div class="search-wrapper-header">
          <label for="search-modal-input" style="margin-top:-1px">
            <span class="sr-only">search icon</span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512"
              height="18"
              width="18"
              class="search-icon"
              data-type="search">
              <path
                fill="currentColor"
                d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z" />
            </svg>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512"
              height="18"
              width="18"
              class="search-reset"
              data-type="reset">
              <path
                fill="currentColor"
                d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" />
            </svg>
          </label>
          <input
            id="search-modal-input"
            type="text"
            data-search-input
            autocomplete="off"
            aria-label="Search"
            placeholder="{{ i18n `search_input_placeholder` | default .input_placeholder }}" />
        </div>
        <div class="search-wrapper-body">
          <div class="search-result" data-search-result></div>
          <span class="search-result-empty">
            {{ i18n `search_initial_message` | default site.Params.search.empty_results_placeholder }}
          </span>
        </div>
        <div class="search-wrapper-footer">
          <span>
            <kbd>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="14"
                height="14"
                fill="currentColor"
                viewBox="0 0 16 16">
                <path
                  d="M3.204 11h9.592L8 5.519 3.204 11zm-.753-.659 4.796-5.48a1 1 0 0 1 1.506 0l4.796 5.48c.566.647.106 1.659-.753 1.659H3.204a1 1 0 0 1-.753-1.659z" />
              </svg>
            </kbd>
            <kbd>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="14"
                height="14"
                fill="currentColor"
                style="margin-top:1px;"
                viewBox="0 0 16 16">
                <path
                  d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z" />
              </svg>
            </kbd>
            {{ i18n `search_navigate` | default "to navigate" }}
          </span>
          <span>
            <kbd>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="12"
                height="12"
                fill="currentColor"
                style="display:inline-block;"
                viewBox="0 0 16 16">
                <path
                  fill-rule="evenodd"
                  d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z" />
              </svg>
            </kbd>
            {{ i18n `search_select` | default "to select" }}
          </span>
          <span class="search-result-info"></span>
          <span data-target="close-search-modal">
            <kbd>ESC</kbd> {{ i18n `search_close` | default "to close" }}
          </span>
        </div>
      </div>
    </div>
  {{ end }}
{{ end }}
